<template>
  <div
    v-show="sourceName"
    class="legend"
  >
    <div
      v-for="(item, index) in colors"
      :key="index"
    >
      <span
        class="color"
        :style="{ backgroundColor: item.color }"
      /><span class="text">{{ item.value }}</span>
    </div>
  </div>
</template>
<script>
import colorMap from './legendColorMap';
export default {
  data () {
    return {
      sourceName: null
    };
  },
  computed: {
    colors () {
      return colorMap[this.sourceName] || [];
    }
  },
  methods: {
    show (names) {
      this.sourceName = names[0];
    }
  }
};
</script>
<style scoped>
.legend {
  position: absolute;
  bottom: 146px;
  right: 544px;
}

.legend > div {
  color: #ccc;
  height: 14px;
}

.legend > div > span {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
}
.color {
  margin-right: 11px;
  width: 14px;
  height: 14px;
}
</style>
